<script lang="ts" setup>
import { ref, defineAsyncComponent, h, reactive } from 'vue'
import type { Component } from 'vue'
import Radio from './components/radio.vue'
import Input from './components/input.vue'
import ButtonNotify from './components/button.vue'
import dep from './components/useEvent.js'


const loadRemoteBlock = async (): Promise<Component> => {
  return new Promise((resolve, reject) => {
    fetch('http://120.25.166.85:5052/js/my-lib.js', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(res => res.text())
    .then(async (code) => {
      // console.log(code)

      const patched = code.replace(`from "vue"`, `from "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js"`)
      const blob = new Blob([patched], { type: 'text/javascript' })
      const moduleUrl = URL.createObjectURL(blob)
      // console.log(moduleUrl)
      const remoteComponent = await import(moduleUrl)

      resolve(remoteComponent)
    })
    .catch(() => {
      reject(h('div', {}, {}))
    })
  })
}


const component = defineAsyncComponent(() => loadRemoteBlock())
// console.log(component)
const count = ref(0)
count.value = 1
// console.log(count.value)


interface Form {
  input: string
  radio: string
}
const form = reactive<Form>({
  input: 'a',
  radio: 'a'
})
dep.form = form

const schema = {
  input: {
    method: {
      onChange: (form: Form, val: string) => {
        console.log(form, val)
        // TODO: 这里应该是更新radio的值
        form.radio = 'b'
      }
    }
  },
  radio: {
    method: {

    }
  }
}
</script>
<template>
  <div>this is App.vue</div>
  <component :is="component" />
  <Input v-model="form" :schema="schema.input"></Input>
  <Radio v-model="form" :schema="schema.radio"></Radio>
  <ButtonNotify></ButtonNotify>

  <router-view></router-view>

</template>
